<template>
  <div>
    <div class="py-5">
      <section class="pb-4 my-4">
        <div>
          <el-card shadow="always" class="rounded-5 bg-warning">
            <div class="yingyong">
              <el-row>
                <el-col :md="6" class="yrow">
                  <h2 class="mt-5">下载有机应用程序</h2>
                  <p class="mb-3">在线订单变得简单、快速和可靠</p>
                  <div class="gap-2 mb-5">
                    <a href="#" title="App store"
                      ><img
                        src="../images/img-app-store.png"
                        alt="app-store"
                        class="img-fluids"
                    /></a>
                    <a href="#" title="Google Play"
                      ><img
                        src="../images/img-google-play.png"
                        alt="google-play"
                    /></a>
                  </div>
                </el-col>
                <el-col :md="5">
                  <img
                    src="../images/banner-onlineapp.png"
                    alt="phone"
                    class="img-phone"
                  />
                </el-col>
              </el-row>
            </div>
          </el-card>
        </div>
      </section>
      <section>
        <div class="people-section">
          <h2 class="my-5">人们也在寻找</h2>
          <a href="#">蓝钻石杏仁</a>
          <a href="#">Angie的玉米片</a>
          <a href="#">咸角玉米</a>
          <a href="#">Chobani希腊酸奶</a>
          <a href="#">甜香草酸奶</a>
          <a href="#">Foster Farms 外带 脆皮鸡翅</a>
          <a href="#">勇士混合有机</a>
          <a href="#">潮芝士奶油</a>
          <a href="#">鸡肉丸</a>
          <a href="#">蓝钻石杏仁</a>
          <a href="#">Angie的玉米片</a>
          <a href="#">咸角玉米</a>
          <a href="#">Chobani希腊酸奶</a>
          <a href="#">甜香草酸奶</a>
          <a href="#">Foster Farms 外带 脆皮鸡翅</a>
          <a href="#">勇士混合有机</a>
          <a href="#">潮芝士奶油</a>
          <a href="#">鸡肉丸</a>
        </div>
      </section>
      <section class="py-6">
        <div>
          <el-row :gutter="20">
            <el-col
              :xs="12"
              :sm="6"
              :md="5"
              :lg="4"
              class="border-width"
              v-for="(service, index) in services"
              :key="index"
            >
              <el-card shadow="hover" class="border-dark-subtle">
                <div class="text-dark mb-3">
                  <img :src="imgs(service.icon)" />
                </div>
                <div class="card-body">
                  <h5>{{ service.title }}</h5>
                  <p class="card-text">{{ service.description }}</p>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </section>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
import Footer from "../pages/footer.vue";
export default {
  components: {
    Footer,
  },
  data() {
    return {
      services: [],
      subscribeForm: {
        email: "",
      },
    };
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

.people-section a {
  display: inline-block; /* 或者 block，根据需求选择 */
  width: 220px; /* 设置宽度 */
  height: 40px; /* 设置高度 */
  text-align: center;
  margin: 12px;
  border-color: #fcf7eb;
  background-color: #fcf7eb;
  color: #747474;
  text-decoration: none;
  line-height: 40px;
  margin-bottom: 0.5rem !important;
}

.people-section a:hover {
  border-color: #ffecbe;
  background-color: #ffecbe;
  color: #747474;
}

.container-lg {
  width: 92%;
  margin: 0 auto;
  margin-top: 50px;
  margin-bottom: 80px;
}

.button-wrap {
  position: relative;
}

.custom-black-button:hover {
  background-color: #fff; /* 设置鼠标悬停时的背景颜色 */
  border-color: #fff; /* 设置鼠标悬停时的边框颜色 */
}

.w-100 {
  width: 83%;
  position: absolute;
  left: -10px;
  top: 50px;
  font-size: 18px;
}

.w-100:hover {
  background-color: orange;
  border-color: orange;
}

.bg-warning {
  width: 92%;
  margin: 0 auto;
  background-color: #ffc107;
  border-radius: 30px;
}

.yingyong {
  position: relative;
}

.mt-5 {
  margin-top: 3rem;
}

.mb-3 {
  margin-top: 1rem;
  margin-bottom: 1rem;
  color: #666;
  font-size: 16px;
}

.yrow {
  width: 80%;
  position: absolute;
  left: 200px;
  margin-top: 100px;
  /* border: 1px solid red; */
  margin-left: 100px;
}

.img-fluids {
  margin-right: 10px;
}

.img-phone {
  margin-bottom: -25px;
  margin-left: 780px;
}

.people-section {
  width: 90%;
  margin: 0 auto;
  margin-top: 80px;
  margin-bottom: 80px;
  /* border: 1px solid black; */
  /* margin-left: 10px; */
}

.my-5 {
  margin-bottom: 20px;
  margin-left: 10px;
  /* border: 1px solid red; */
}

.me-2 {
  border-color: #fcf7eb;
  background-color: #fcf7eb;
  color: #747474;
  /* border: 2px solid greenyellow; */
  margin-top: 5px;
  margin-left: 10px;
}

.me-2:hover {
  border-color: #ffecbe;
  background-color: #ffecbe;
  color: #747474;
}

.me-1 {
  /* width: 14.5%; */
  /* text-align: center; 如果需要居中对齐文本 */
  border: 1px solid red;
  /* display: inline-block; 确保按钮根据内容自适应宽度 */
}

.py-6 {
  width: 90%;
  margin: 0 auto;
  margin-bottom: 80px;
}

.border-width {
  width: 20%;
}

.border-dark-subtle {
  border: 1px solid black;
  border-radius: 10px;
}

.card-body h5 {
  font-size: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.card-text {
  color: #999;
  padding-bottom: 10px;
}

.flex-column {
  /* border: 1px solid red; */
  margin-left: 80px;
}
</style>